<template>
  <div>
    <transition>
      <div class="animated rubberBand" style="text-align: center">
        <img class="advert_avatar_no_border" :style="{width: width}" src="../assets/yunlogo.png" alt="logo" />
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "Logo",
  props: {
    width: {
      default: '200px'
    },
  },
  components: {},
  data() {
    return {};
  }
};
</script>

<style scoped>
  .advert_avatar_no_border {
    padding: 0;
    width: 20%;
    animation: advert_nav-m 20s linear infinite;
    -moz-animation: advert_nav-m 20s linear infinite;
    /* Firefox */
    -webkit-animation: advert_nav-m 20s linear infinite;
    /* Safari Chrome */
    -o-animation: advert_nav-m 20s linear infinite;
    animation-direction: alternate;
  }
  .advert_avatar_no_border:hover {
    animation: advert_nav-x 0.3s linear infinite;
    -moz-animation: advert_nav-x 0.3s linear infinite;
    /* Firefox */
    -webkit-animation: advert_nav-x 0.3s ease-in-out infinite;
    /* Safari Chrome */
    -o-animation: advert_nav-x 0.3s linear infinite;
  }
  @keyframes advert_nav-x {
    10% {
      -webkit-transform:rotate3d(0,0,0,0deg);
      border-color: #ffbebe;
    }
    100% {
      -webkit-transform:rotate3d(0,1,0,45deg);
      border-color: #ffdebe;
    }
    30% {
      -webkit-transform: translate(-20.5px, -10.5px) rotate(0.5deg);
      border-color: #fff3be;
    }
    40% {
      -webkit-transform: translate(-20.5px, -20.5px) rotate(-1.5deg);
      border-color: #eeffbe;
    }
    50% {
      -webkit-transform: translate(2px, 2px) rotate(-1.5deg);
      border-color: #f3ffbe;
    }
    60% {
      -webkit-transform: translate(-2.5px, -0.5px) rotate(-0.5deg);
      border-color: #e9ffbe;
    }
    70% {
      -webkit-transform: translate(2px, -2.5px) rotate(-0.5deg);
      border-color: #d0ffbe;
    }
    80% {
      -webkit-transform: translate(1px, 2px) rotate(0.5deg);
      border-color: #beffde;
    }
    90% {
      -webkit-transform: translate(-2.5px, -0.5px) rotate(0.5deg);
      border-color: #beefff;
    }
    100% {
      -webkit-transform: translate(-0.5px, -0.5px) rotate(-1.5deg);
      border-color: #bed8ff;
    }
  }
</style>
